<template>
    <div class="login-page">
      <!-- 左侧品牌区域 -->
      <div class="login-left">
        <div class="brand-container">
          <h1 class="brand-title">JeeSite Demo</h1>
          <div class="brand-illustration">
            <!-- 电脑插图（使用图片或SVG模拟） -->
            <div class="computer">
              <div class="computer-screen">
                <div class="screen-content"></div>
              </div>
              <div class="computer-base"></div>
            </div>
            <div class="decor-plant">
              <div class="plant-pot"></div>
              <div class="plant-leaves"></div>
            </div>
            <div class="decor-penholder">
              <div class="penholder"></div>
              <div class="pens"></div>
            </div>
          </div>
          <p class="brand-desc">
            JeeSite是一个专业的平台，是一个让你使用放心的平台。<br>
            前端基于Vue3、Vite、TypeScript、Ant-Design-Vue、Vben Admin，<br>
            后台基于Spring Boot、Apache MyBatis等，最先进、最经典的技术栈。<br>
            精致的UI、规范的代码书写、匠心著作、封装细节、专注业务、快速开发。
          </p>
        </div>
      </div>
  
      <!-- 右侧登录表单区域 -->
      <div class="login-right">
        <div class="login-card">
          <h2 class="login-title">登录</h2>
          
          <!-- 登录表单 -->
          <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0px">
            <!-- 用户选择下拉框 -->
            <el-form-item>
              <el-select 
                v-model="loginForm.userSelect" 
                placeholder="请选择用户"
                class="form-select"
              >
                <el-option label="(1) 测试租户01" value="tenant1"></el-option>
                <el-option label="(2) 测试租户02" value="tenant2"></el-option>
              </el-select>
            </el-form-item>
  
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input 
                v-model="loginForm.username" 
                placeholder="用户名" 
                prefix-icon="el-icon-user"
                class="form-input"
              ></el-input>
            </el-form-item>
  
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input 
                v-model="loginForm.password" 
                :type="showPwd ? 'text' : 'password'" 
                placeholder="密码" 
                prefix-icon="el-icon-lock"
                class="form-input"
              >
                <i 
                  slot="suffix" 
                  :class="showPwd ? 'el-icon-eye-off' : 'el-icon-eye'" 
                  @click="showPwd = !showPwd"
                  class="pwd-icon"
                ></i>
              </el-input>
            </el-form-item>
  
            <!-- 验证码 -->
            <el-form-item prop="code">
              <div class="code-group">
                <el-input 
                  v-model="loginForm.code" 
                  placeholder="验证码" 
                  prefix-icon="el-icon-key"
                  class="code-input"
                ></el-input>
                <div class="code-img" @click="refreshCode">
                  {{ codeText }}
                </div>
              </div>
            </el-form-item>
  
            <!-- 记住我 + 忘记密码 -->
            <el-form-item class="form-extra">
              <el-checkbox v-model="loginForm.rememberMe" class="remember-me">记住我</el-checkbox>
              <a href="#" class="forget-pwd">忘记密码?</a>
            </el-form-item>
  
            <!-- 主登录按钮 -->
            <el-form-item>
              <el-button 
                type="primary" 
                class="main-login-btn"
                @click="handleLogin"
              >
                登录
              </el-button>
            </el-form-item>
  
            <!-- Gitee免密登录 -->
            <el-form-item>
              <el-button 
                type="primary" 
                class="gitee-login-btn"
                icon="el-icon-github"
              >
                使用 Gitee 账号，免密登录
              </el-button>
            </el-form-item>
  
            <!-- 其他登录方式 -->
            <div class="other-login">
              <el-button type="default" class="other-btn">手机登录</el-button>
              <el-button type="default" class="other-btn">二维码登录</el-button>
              <el-button type="default" class="other-btn">注册</el-button>
            </div>
  
            <!-- 其他登录图标 -->
            <div class="login-icons">
              <p class="icons-desc">其他登录方式</p>
              <div class="icons-group">
                <i class="el-icon-qq login-icon"></i>
                <i class="el-icon-github login-icon"></i>
                <i class="el-icon-weixin login-icon"></i>
                <i class="el-icon-chrome login-icon"></i>
                <i class="el-icon-steam login-icon"></i>
                <a href="#" class="client-download">客户端下载</a>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'JeeSiteLogin',
    data() {
      return {
        // 登录表单数据
        loginForm: {
          userSelect: 'tenant1', // 默认选择第一个租户
          username: 'system',
          password: '123456',
          code: '',
          rememberMe: true
        },
        // 表单校验规则
        loginRules: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
          code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
        },
        showPwd: false, // 密码是否可见
        codeText: '3H3D' // 验证码文本
      }
    },
    methods: {
      // 刷新验证码
      refreshCode() {
        const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
        let code = '';
        for (let i = 0; i < 4; i++) {
          code += chars[Math.floor(Math.random() * chars.length)];
        }
        this.codeText = code;
      },
      // 登录处理
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            // 实际项目中替换为登录接口请求
            this.$message.success('登录成功');
          }
        });
      }
    }
  };
  </script>
  
  <style scoped>
  /* 页面整体布局 */
  .login-page {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
  }
  
  /* 左侧品牌区域 */
  .login-left {
    flex: 1;
    background: linear-gradient(135deg, #0c4da2 0%, #1e88e5 100%);
    color: #fff;
    padding: 0 50px;
    display: flex;
    align-items: center;
  }
  
  .brand-container {
    width: 100%;
    max-width: 600px;
  }
  
  .brand-title {
    font-size: 32px;
    margin-bottom: 40px;
    font-weight: 600;
  }
  
  .brand-illustration {
    position: relative;
    width: 100%;
    height: 240px;
    margin-bottom: 40px;
  }
  
  /* 电脑插图样式 */
  .computer {
    position: absolute;
    top: 20px;
    left: 50px;
  }
  
  .computer-screen {
    width: 280px;
    height: 180px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 8px 8px 0 0;
    position: relative;
  }
  
  .screen-content {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 250px;
    height: 150px;
    background-color: rgba(255, 255, 255, 0.1);
  }
  
  .computer-base {
    width: 320px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 0 0 8px 8px;
    margin-left: -20px;
  }
  
  /* 装饰植物 */
  .decor-plant {
    position: absolute;
    top: 140px;
    left: 0;
  }
  
  .plant-pot {
    width: 30px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0 0 5px 5px;
  }
  
  .plant-leaves {
    width: 40px;
    height: 60px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    margin-top: -10px;
    margin-left: -5px;
  }
  
  /* 装饰笔筒 */
  .decor-penholder {
    position: absolute;
    top: 160px;
    left: 340px;
  }
  
  .penholder {
    width: 40px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 5px;
  }
  
  .pens {
    width: 30px;
    height: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    margin-top: -25px;
    margin-left: 5px;
  }
  
  .brand-desc {
    font-size: 14px;
    line-height: 24px;
    opacity: 0.9;
  }
  
  /* 右侧登录表单区域 */
  .login-right {
    flex: 0 0 450px;
    background-color: #f5f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px;
  }
  
  .login-card {
    width: 100%;
    max-width: 360px;
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }
  
  .login-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 600;
  }
  
  /* 表单元素样式 */
  .form-select {
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
  }
  
  .form-input {
    width: 100%;
    height: 40px;
  }
  
  .pwd-icon {
    cursor: pointer;
    color: #999;
  }
  
  /* 验证码区域 */
  .code-group {
    display: flex;
    gap: 10px;
  }
  
  .code-input {
    flex: 1;
    height: 40px;
  }
  
  .code-img {
    width: 120px;
    height: 40px;
    background-color: #f5f5f5;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    color: #0c4da2;
    letter-spacing: 3px;
    cursor: pointer;
    user-select: none;
  }
  
  /* 记住我和忘记密码 */
  .form-extra {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0;
  }
  
  .remember-me {
    color: #666;
    font-size: 14px;
  }
  
  .forget-pwd {
    color: #1e88e5;
    font-size: 14px;
    text-decoration: none;
  }
  
  .forget-pwd:hover {
    text-decoration: underline;
  }
  
  /* 登录按钮 */
  .main-login-btn {
    width: 100%;
    height: 40px;
    background-color: #1e88e5;
    border-color: #1e88e5;
    margin-bottom: 10px;
  }
  
  .gitee-login-btn {
    width: 100%;
    height: 40px;
    background-color: #2c3e50;
    border-color: #2c3e50;
    margin-bottom: 20px;
  }
  
  /* 其他登录方式 */
  .other-login {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
  }
  
  .other-btn {
    flex: 1;
    height: 36px;
    background-color: #f5f5f5;
    color: #666;
    border-color: #e6e6e6;
  }
  
  /* 登录图标区域 */
  .login-icons {
    text-align: center;
  }
  
  .icons-desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
  }
  
  .icons-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
  }
  
  .login-icon {
    font-size: 20px;
    color: #666;
    cursor: pointer;
  }
  
  .login-icon:hover {
    color: #1e88e5;
  }
  
  .client-download {
    font-size: 12px;
    color: #1e88e5;
    text-decoration: none;
    margin-left: 10px;
  }
  
  /* 响应式适配 */
  @media (max-width: 992px) {
    .login-page {
      flex-direction: column;
    }
  
    .login-left {
      flex: none;
      height: 300px;
      padding: 30px;
    }
  
    .brand-illustration {
      display: none; /* 小屏幕隐藏插图 */
    }
  
    .login-right {
      flex: none;
      width: 100%;
      padding: 30px;
    }
  }
  </style>